<!--
 * @Author: jackning 270580156@qq.com
 * @Date: 2024-12-28 21:09:16
 * @LastEditors: jackning 270580156@qq.com
 * @LastEditTime: 2024-12-31 13:04:46
 * @Description: bytedesk.com https://github.com/Bytedesk/bytedesk
 *   Please be aware of the BSL license restrictions before installing Bytedesk IM – 
 *  selling, reselling, or hosting Bytedesk IM as a service is a breach of the terms and automatically terminates your rights under the license. 
 *  仅支持企业内部员工自用，严禁私自用于销售、二次销售或者部署SaaS方式销售 
 *  Business Source License 1.1: https://github.com/Bytedesk/bytedesk/blob/main/LICENSE 
 *  contact: 270580156@qq.com 
 *  联系：270580156@qq.com
 * Copyright (c) 2024 by bytedesk.com, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ByteDesk Web Module Demo</title>
    <script type="module">
        // 使用默认导出
        import BytedeskWeb from '/dist/index/index.js';

        // 配置
        const config = {
            theme: {
                textColor: '#ffffff',
                backgroundColor: '#2e88ff',
            },
            chatConfig: {
                org: 'df_org_uid', // 替换为您的组织ID
                t: '2',
                sid: 'df_rt_uid'  // 替换为您的SID
            },
            bubbleConfig: {
                show: true,
                icon: '👋',
                title: 'Need help?',
                subtitle: 'Click to chat'
            },
            marginBottom: 20,
            marginSide: 20
        };

        // 初始化
        const bytedesk = new BytedeskWeb(config);
        bytedesk.init();

        // 导出到全局以便控制按钮使用
        window.bytedesk = bytedesk;
    </script>
</head>

<body>
    <div style="padding: 20px;">
        <h1>ByteDesk Web Module Demo</h1>
        <p>This demo shows how to use ByteDesk Web in module format.</p>
        
        <div style="margin: 20px 0;">
            <button onclick="window.bytedesk?.showChat()">Open Chat</button>
            <button onclick="window.bytedesk?.hideChat()">Close Chat</button>
        </div>

        <div style="margin-top: 40px;">
            <h2>Installation</h2>
            <pre><code>
// Copy this code to your page
&lt;script type="module"&gt;
  import { BytedeskWeb } from 'bytedesk-web';

  const config = {
    theme: {
      textColor: '#ffffff',
      backgroundColor: '#2e88ff',
    },
    chatConfig: {
        org: 'df_org_uid', // 替换为您的组织ID
        t: '2',
        sid: 'df_rt_uid'  // 替换为您的SID
    },
  };

  const bytedesk = new BytedeskWeb(config);
  bytedesk.init();
&lt;/script&gt;
            </code></pre>
        </div>
    </div>
</body>

</html> 